<!-- 基础雷达 -->
<template>
  <div :id="props.id" class="wh100"></div>
</template>

<script setup lang="ts" name="HzEchartsRadarSimple">
import * as echarts from 'echarts';
import {onMounted} from "vue";
import {getEchartsTextColor, getEchartsTheme} from "/@utils/GlobalFunction";
import {EchartsData} from "/@bean/GlobalEntity";
import {loadEchartsData} from "/@api/hz-bigscreen-api";

// eslint-disable-next-line no-undef
const props = defineProps({
  id: {
    type: String,
    default: 'pie-simple'
  },
  showTitle: {
    type: Boolean,
    default: true
  },
  showLegend: {
    type: Boolean,
    default: true
  },
  showTooltip: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: '基础雷达图'
  },
  data: {
    type: Object,
    default: () => {
      return {
        indicator: [
          { name: 'Sales', max: 6500 },
          { name: 'Administration', max: 16000 },
          { name: 'Information Technology', max: 30000 },
          { name: 'Customer Support', max: 38000 },
          { name: 'Development', max: 52000 },
          { name: 'Marketing', max: 25000 }
        ],
        content: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: 'Allocated Budget'
          },
          {
            value: [5000, 14000, 28000, 26000, 42000, 21000],
            name: 'Actual Spending'
          }
        ]
      }
    }
  },
  apiPath: { // api路径
    type: String,
    default: ''
  },
  chartsType: { // 图表类型
    type: String,
    default: 'radarSimple'
  },
  methodType: {
    type: String, // 请求方式
    default: 'get'
  }
});

const option : any  = {
  title: {
    text: props.title,
    show: props.showTitle,
    textStyle: {
      color: getEchartsTextColor()
    },
  },
  legend: {
    show: props.showLegend,
    textStyle: {
      color: getEchartsTextColor()
    },
  },
  radar: {
    // shape: 'circle',
    indicator: props.data?.indicator
  },
  tooltip: {
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    },
    show: props.showTooltip
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      label: {
        color: getEchartsTextColor()
      },
      data: props.data?.content
    }
  ]
};
// 画布的宽高
const canvas = ref({
  width: 1920,
  height: 963
})

const scale = ref(1)


onMounted(() => {
  init()
});

const basicBar = ref();

function init() {
  scale.value = Math.min(window.innerWidth/canvas.value.width, window.innerHeight/canvas.value.height)
  //@ts-ignore
  document.body.style.zoom = scale.toString()
  basicBar.value = markRaw(echarts.init(document.getElementById(props.id), getEchartsTheme));
  basicBar.value.setOption(option);
  window.addEventListener('resize', () => {
    basicBar.value.resize();
  });
}

//@ts-ignore
watch(getEchartsTheme, () => {
  resetOption()
  init()
});
// 解决全局缩放导致的echarts canvas鼠标位置不准确的问题
const updateZoom = () => {
  const zoomValue = 1 / scale.value;
  const chartContainer = document.getElementById(props.id);
  if (chartContainer) {
    chartContainer.style.zoom = zoomValue.toString();
  }
};
function resetOption() {
  option.title.textStyle.color = getEchartsTextColor()
  option.legend.textStyle.color = getEchartsTextColor()
  option.series[0].label.color = getEchartsTextColor()
}

// 刷新图表方式，该方法需要提供给外部调用
// eslint-disable-next-line no-unused-vars
const refreshCharts = (data : any) => {
  option.title.text = data.title;
  option.radar.indicator = data.indicator as any[]
  option.series[0].data = data.content as any[]
  init()
};

// 刷新图表  根据apiPath，method，type query获取数据
const refreshChartsByApi = async (query : any) => {
  // 如果query中没有封装type则给query添加type属性
  if (!query.hasOwnProperty('chart_type')) {
    query.chart_type = props.chartsType
  }
  const s = await loadEchartsData(props.apiPath, props.methodType, query)
  refreshCharts(s.data)
}
// 监听 scale 的变化
watch(scale, () => {
  updateZoom();
});
// 重置图表大小
const resizeEcharts = () => {
  basicBar.value.resize();
}

// eslint-disable-next-line no-undef
defineExpose({
  refreshCharts,
  resizeEcharts,
  refreshChartsByApi
});
</script>

<style scoped>

</style>